/*
* Copyright (c) 2025 Huawei Device Co., Ltd.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including but not limited to the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to provide persons with access to the Software
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGE OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/

<template>
  <div class='container'>
    <TabBarContainerVue>
      <TabBarContentVue>
        <div class='main-content' :style='{ paddingTop: `${topAvoidArea}px` }'>
          <CustomTab></CustomTab>

          <swiper :options='swiperOptions' :slidesPerView='slidesPerViewCount' ref='mySwiper'>
            <swiper-slide v-for='(image, index) in images' :key='index'>
              <img :src='image.uri' class='carousel-image' />
            </swiper-slide>
            <div class='swiper-pagination' slot='pagination'>
            </div>
          </swiper>

          <div class='entrances-centent'>
            <swiper :options='swiperOptionsLong' :slidesPerView="'auto'" :resistanceRatio='0' ref='mySwiper3'>
              <swiper-slide v-for='(image, index) in entrances' :key='index' class='swiper-slide'>
                <div class='entrances' :style='{ paddingRight: entrancesPadding }'>
                  <img :src='image.uri' class='entrances-image' />
                  <div class='entrances-text'>{{ image.name }}</div>
                </div>
              </swiper-slide>
            </swiper>
          </div>

          <MultiGridVue :columnsTemplate='columnsTemplate' gridColumnGap='20px' gridRowGap='12px' style='height: auto;'>
            <div v-for='(item) in girdData' :key='item.id'>
              <div class='item-container'>
                <img src='../../assets/videoList/images/image1.png' style='width: 100%;' />
                <div class='text-overlay'>
                  <div class='top-left'>正片</div>
                  <div class='bottom-right'>9.0</div>
                </div>
              </div>
              <div class='item-content'>
                <div class='common-text item-title'>{{ '这是超人的水准' }}</div>
                <div class='common-text item-subtitle'>{{ '中秋节端午节重阳节泼水节节日快乐节日快乐' }}</div>
              </div>
            </div>
          </MultiGridVue>
        </div>
      </TabBarContentVue>
      <TabBarVue :bgColor="'#F1F3F5'" :height='barHeight' :width='barWidth'>
        <TabBarItemVue v-for='(title, index) in tabBarData' :key='index'>
          <div class='tab-button' :style='{ marginBottom: `${bottomAvoidArea}px` }'>
            <img class='bottom-img' :src='title.uri' />
            <span :class="index === 0 ? 'bottom-title-active' : 'bottom-title'"> {{ title.name }}</span>
          </div>
        </TabBarItemVue>
      </TabBarVue>
    </TabBarContainerVue>
  </div>
</template>

<script lang='ts' setup>
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue';
import { BreakpointManager } from '@hadss/web_adaptive_layout_ui';
import { TabBarContainerVue, TabBarContentVue, TabBarVue, TabBarItemVue } from '@hadss/web_adaptive_layout_vue3';
import { girdData, images, entrances, tabBarData } from './mockData';
import CustomTab from './CustomTab.vue';
import { MultiGridVue } from '@hadss/web_adaptive_layout_vue3';
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/swiper-bundle.css';
import { AvoidArea, AvoidAreaInfo, AvoidAreaType } from '../../common/windowCommon';

const breakpointManager = new BreakpointManager();
const columnsTemplate = {
  sm: '1fr 1fr',
  md: '1fr 1fr 1fr',
  lg: '1fr 1fr 1fr 1fr'
};
const barHeight = reactive({
  sm: '56px',
  md: '48px',
  lg: '100%'
});
const barWidth = {
  md: '100%',
  lg: '96px'
};
const showSwiper = ref(true);
const slidesPerViewCount = ref(1);
const swiperOptions = {
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
    type: 'bullets'
  },
  loop: true,
  autoplay: false,
  slidesPerView: 1,
  spaceBetween: 30,
  effect: 'slide',
  speed: 500,
  resistance: true,
  resistanceRatio: 0.85,
};
const swiperOptionsLong = {
  direction: 'horizontal',
  autoplay: false,
  loop: false,
  freeMode: true,
  grabCursor: true,
  mousewheel: {
    forceToAxis: true
  },
  resistanceRatio: 0,
  scrollbar: {
    el: '.swiper-scrollbar',
    draggable: true
  }
};
const entrancesPadding = ref('38px');
const topAvoidArea = ref(0);
const bottomAvoidArea = ref(0);

const unsubscribe = breakpointManager.subscribeToBreakpoint(() => {
  showSwiper.value = breakpointManager.useBreakpointValue({
    sm: true,
    md: false,
    lg: false
  });
  slidesPerViewCount.value = breakpointManager.useBreakpointValue({
    sm: 1,
    md: 2,
    lg: 2,
    xl: 3
  });
  entrancesPadding.value = breakpointManager.useBreakpointValue({
    sm: '38px',
    md: '65px',
    lg: '100px',
  });
});

const handleAvoidAreaChange = (event: any): void => {
  const data = event.detail as AvoidAreaInfo;
  const areaType = data.type;
  if (areaType === AvoidAreaType.TYPE_SYSTEM) {
    topAvoidArea.value = (window as any).webClass?.pxToVp(data.area.topRect.height);
  }
  if (areaType === AvoidAreaType.TYPE_NAVIGATION_INDICATOR) {
    bottomAvoidArea.value = (window as any).webClass?.pxToVp(data.area.bottomRect.height);
    Object.assign(barHeight, {
      sm: `${56 + bottomAvoidArea.value}px`,
      md: `${48 + bottomAvoidArea.value}px`,
      lg: '100%'
    });
  }
};

onMounted(() => {
  if ((window as any).webClass) {
    const webClass = (window as any).webClass;
    const topArea = webClass.getAvoidArea(AvoidAreaType.TYPE_SYSTEM) as AvoidArea;
    const bottomArea = webClass.getAvoidArea(AvoidAreaType.TYPE_NAVIGATION_INDICATOR) as AvoidArea;
    topAvoidArea.value = webClass.pxToVp(topArea.topRect.height);
    bottomAvoidArea.value = webClass.pxToVp(bottomArea.bottomRect.height);
    Object.assign(barHeight, {
      sm: `${56 + bottomAvoidArea.value}px`,
      md: `${48 + bottomAvoidArea.value}px`,
      lg: '100%'
    });
  }
  window.addEventListener('avoidAreaChange', handleAvoidAreaChange);
});

onBeforeUnmount((): void => {
  if (unsubscribe) {
    unsubscribe();
  }
  window.removeEventListener('avoidAreaChange', handleAvoidAreaChange);
});
</script>

<style lang='less' scoped>
@import './VideoHome.less';
</style>